import React, { useEffect, useState } from 'react';
import { TitleGrid } from '../stores/definitions';
import { t } from '@lingui/macro';
import { observer } from 'mobx-react-lite';
import { useStore } from '@/hooks';
import SurchargesFieldsGrid from './SurchargesFieldsGrid';

const MerchantSurchargesInfo = (props) => {
  const { formData } = props;
  const { ccOrderStore: store } = useStore();
  const [surcharges, setSurcharges] = useState({});
  const show = !!formData?.merchant;

  useEffect(() => {
    (async () => {
      const merchantId = formData?.merchant;
      if (merchantId) {
        const { merchantSurcharges } = await store.getMerchantInfo(merchantId);
        setSurcharges(merchantSurcharges);
      }
    })();
  }, [formData]);

  if (!show) return <></>;


  return (
    <>
      <TitleGrid title={t`商户附加费`} />
      <SurchargesFieldsGrid
        dataSource={surcharges}
      />
    </>
  );
};

export default observer(MerchantSurchargesInfo);
